<template>
    <div class="main">
        <div class="main_box">
            <div class="countBox" v-if="perCount != 0" :style="'left:' + preBoxNum * 4.36 + '%;'">{{ perCount }}%</div>
            <div v-if="perCount == 0" class="countBox" style="top:-25px;"><span>音频处理中</span> <i class="el-icon-loading"
                    style="margin-left:5px;"></i></div>
            <div class="overFlowBox">
                <div class="preItem" v-for="(item, index) in preBoxNum" :key="index"
                    :style="'background:rgb(1,' + (180 - index * 7) + ',255);'"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            perCount: 0,
            colorCount: 180,
            preBoxNum: 0,
        }
    },
    props: ['precent'],
    watch: {
        precent(newV, oldVal) {
            console.log("newV===", newV);
            console.log("newV===", typeof newV);
            // let aNew = newV.toString()
            // console.log("newV===",aNew);
            // console.log("newV===",typeof aNew);
            // let count = aNew.substring(0,aNew.length - 1)//传过来的数值,10,20,30,40,...
            // this.perCount = count;
            // console.log("this.perCount",this.perCount);
            // this.preBoxNum = Math.ceil(0.21*count)
            // console.log("this.preBoxNum",this.preBoxNum);
            let count = newV.substring(0, newV.indexOf('%'))//传过来的数值,10,20,30,40,...
            this.perCount = count;//显示的百分比10%,20%,30%
            console.log("this.perCount", this.perCount);
            this.preBoxNum = Math.ceil(0.21 * count)//分成21份,1~21,newV变化时候,preBoxNum也随着变化,最后为21,上面循环preBoxNum
            console.log("this.preBoxNum", this.preBoxNum);

        }
    }
}
</script>
<style scoped>
.main {
    width: 230px;
}

.main_box {
    /* width: 100%; */
    height: 10px;
    padding: 2px;
    border-radius: 10px;
    border: 1px dashed rgb(1, 75, 255);
    /* overflow: hidden; */
    position: relative;
}

.overFlowBox {
    /* height: 100%; */
    width: 98%;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    border-radius: 10px;
    overflow: hidden;
}

.preItem {
    height: 10px;
    width: 8px;
    transform: skewx(-20deg);
    margin-right: 3px;
}

.preItem:nth-last-child(1) {
    margin-right: 0;
}

.countBox {
    font-size: 15px;
    position: absolute;
    top: -20px;
    color: rgb(0, 75, 255);
}
</style>